window.addEventListener('load', () => {
    // 将要用到的元素存放到obj对象中
    let obj = {
        game: {
            name: document.querySelector('.game'),
            get bgx() {
                return parseInt(window.getComputedStyle(this.name, null).backgroundPositionX);
            },
            set bgx(newvalue) {
                this.name.style.backgroundPositionX = newvalue + 'px';
            },
            get height() {
                return parseInt(window.getComputedStyle(this.name).height);
            },
            get width() {
                return parseInt(window.getComputedStyle(this.name).width);
            },
        },
        bird: {
            name: document.querySelector('.game .bird'),
            speed: 0,
            get top() {
                return parseInt(window.getComputedStyle(this.name, null).top);
            },
            set top(value) {
                this.name.style.top = value + 'px'
            },
            get speedy() {
                return this.speed;
            },
            set speedy(value) {
                this.speed = value;
            }
        },
        h5: document.querySelector('.game h5'),
        p: {
            name: document.querySelector('.game p'),
            get width() {
                return parseInt(window.getComputedStyle(this.name).width);
            },
            set width(value) {
                this.name.style.width = value + 'px';
            }
        },
        daojishi: document.querySelector('.daojishi'),
        count: document.querySelector('.game div .count'),
        jishi: document.querySelector('.game .time')
    };
    //设置全局变量
    let birdDown = null;                //小鸟下落
    let jishi = null;                   //右上角计时
    let bgmove = null;                  //背景移动
    let dingshi = null;                 //开局倒计时
    let pipe = null;                    //自动生成管道
    let arr = [];                       //存放生成的管道实例
    let index = 0;                      //arr数组下标
    let scope = 0;                      //得分
    let time = 0;                       //时间
    //添加管道
    class createPipe {
        static num = 0;
        constructor(height, index) {
            ++createPipe.num;
            this.h = height;
            this.interval = null;
            this.index = index;
            this.num = createPipe.num;
            if (createPipe.num % 2 == 1) {
                this.el = document.createElement('div');
                this.el.classList.add('pipeTop');
                this.el.style.top = -260 + height + 'px';
                obj.game.name.appendChild(this.el);
            } else {
                this.el = document.createElement('div');
                this.el.classList.add('pipeBottom')
                this.el.style.bottom = -260 + height + 'px';
                obj.game.name.appendChild(this.el);
            };
            this.run();
        };
        get right() {
            return parseInt(window.getComputedStyle(this.el).right);
        };
        set right(value) {
            this.el.style.right = value + 'px';
        }
        run() {
            this.interval = setInterval(() => {
                this.right = this.right + 1;
                let bottom = parseInt(window.getComputedStyle(obj.bird.name).bottom);
                if (this.el.offsetLeft == obj.bird.name.offsetLeft + 50) {
                    if (this.num % 2 == 1) {
                        if (obj.bird.name.offsetTop <= this.h) {
                            obj.h5.innerHTML = '这么大的柱子看不见???';
                            callback();
                        }
                    } else {
                        if (bottom <= this.h) {
                            obj.h5.innerHTML = '这么大的柱子看不见???';
                            callback();
                        }
                    }
                }
                if (this.el.offsetLeft > 0 && this.el.offsetLeft < 150) {
                    if (this.num % 2 == 1) {
                        if (obj.bird.name.offsetTop <= this.h) {
                            obj.bird.name.style.top = this.h + 'px';
                            obj.h5.innerHTML = '这么大的柱子看不见???';
                            callback();
                        }
                    }
                    else if (this.num % 2 == 0) {
                        if (bottom <= this.h) {
                            obj.bird.name.style.top = obj.game.name.offsetHeight - this.h - 45 + 'px';
                            obj.h5.innerHTML = '这么大的柱子看不见???';
                            callback();
                        }
                    }
                }
                if (this.el.offsetLeft == obj.bird.name.offsetLeft - 50) {
                    scope += 50;
                    obj.count.innerHTML = scope;
                }
                if (this.right >= obj.game.width) {
                    clearInterval(this.interval);
                    obj.game.name.removeChild(this.el);
                    arr[this.index] = null;         //释放内存
                }
            }, 4);
        }
    }
    //通过callback函数移除动画效果和点击效果
    function callback() {
        clearInterval(dingshi)                      //关闭倒计时
        clearInterval(jishi);                       //关闭计时
        clearInterval(bgmove);                      //关闭背景移动
        clearInterval(birdDown);                    //关闭小鸟下落
        clearInterval(pipe);                        //关闭自动生成管道
        obj.h5.style.display = 'block';
        obj.p.name.style.display = 'block';
        // 让p标签宽度自动慢慢变大
        let p = setInterval(() => {
            obj.p.width = obj.p.width + 30;
            if (obj.p.width >= obj.game.width) {
                obj.p.width = obj.game.width;
                clearInterval(p);
            }
        }, 30);
        //清除所有管道实例的定时器
        for (let i = 0; i < 40; i++) {
            if (arr[i]) {
                clearInterval(arr[i].interval);
            }
        };
        // 移除.big的点击事件
        document.querySelector('.big').onclick = null;
    }
    //复原
    function Resize() {
        obj.count.innerHTML = 0;
        obj.jishi.innerHTML = 0;
        document.querySelector('#mybird').style.display = 'block';
        obj.daojishi.style.display = 'block';
        obj.daojishi.innerHTML = 4;
        obj.bird.name.style.top = '100px';
        obj.p.width = 200;
        obj.p.name.style.display = 'none';
        obj.h5.style.display = 'none';
        obj.bird.speedy = 0;
        scope = 0;
        time = 0;
        for (let i = 0; i < 40; i++) {
            if (arr[i]) {
                obj.game.name.removeChild(arr[i].el);
                arr[i] = null;              //释放内存
            }
        };
        arr = [];
        index = 0;
    };
    //加载效果
    function load() {
        let id = new Promise((resolve, reject) => {
            // 点击开始游戏
            document.querySelector('#mybird button').addEventListener('click', () => {
                document.querySelector('#mybird').style.display = 'none';

                // console.log(obj.bird.name.offsetTop);

                clearInterval(birdDown)

                resolve(obj.daojishi);
            });
        }).then(value => {
            // 开局的倒计时效果
            return new Promise((resolve, reject) => {
                let num = 3;
                dingshi = setInterval(() => {
                    if (num == 0) {
                        value.innerHTML = '准备开始！';
                        num--;
                    }
                    else if (num > 0) {
                        value.innerHTML = num--;
                    }
                    else if (num == -1) {
                        obj.daojishi.style.display = 'none';
                        resolve(obj.game.name);
                    }
                }, 1000)
            })
        }).then(value => {
            //整个游戏效果
            // 自动生成管道
            pipe = setInterval(() => {
                obj.jishi.innerHTML = ++time;
                let height = Math.floor(Math.random() * 130 + 130);
                arr[(index) % 40] = new createPipe(height, (index++) % 40);
            }, 500);
            //这里是让背景移动
            bgmove = setInterval(() => {
                let bgx1 = obj.game.bgx - 1;
                obj.game.bgx = bgx1;
            }, 20);
            //小鸟的下落动画
            birdDown = setInterval(() => {
                obj.bird.speedy = obj.bird.speedy + 1;
                obj.bird.top = obj.bird.top + obj.bird.speedy;
                if (obj.bird.top >= parseInt(obj.game.height) - 50) {
                    obj.bird.top = parseInt(obj.game.height) - 50;
                    obj.h5.innerHTML = '磕死我了';
                    callback();
                };
                if (obj.bird.top <= 0) {
                    obj.bird.top = 0;
                    obj.h5.innerHTML = '撞到头了';
                    callback();
                }
            }, 40)
            //点击让小鸟上升
            document.querySelector('.big').onclick = () => {
                obj.bird.speedy = obj.bird.speedy - 8;
            };
            // 点击重新开始
        }).catch(error => {
            console.log('ERROR' + error);
        })
        id = null;
    }
    load();
    //点击重新开始
    obj.p.name.addEventListener('click', () => {
        callback();
        Resize();
        load();
        // location.reload();
    });
});